<template>
  <div class="tablePageWarp">
    <div class="commonTableSty">
      <s-table
        class="h100"
        ref="table"
        :columns="columns"
        :data="loadData"
        :scrollX="900"
        :rowKey="(record, index) => index"
        size="default" >
        <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text || '-'" :key="column.key"></table-ellipsis>
        </template>
        <template slot="ecuVersion" slot-scope="text, record">
          <a @click="showEcuDetail(record)">
            <table-ellipsis :text="'查看'"></table-ellipsis>
            <!-- <a-icon type="apartment"/> -->
          </a>
        </template>
      </s-table>
    </div>
    <!-- 车辆版本具体ecu版本查询 -->
    <custom-modal
      :width="1100"
      :visible="ecuVersionVisible"
      title="ECU版本"
      :destroyOnClose="true"
      class="largeVersionPopup"
      @cancel="handleCancelEcuVersion"
      @full="fullModal"
      modalCls=".largeVersionPopup"
      :isOkBtn="false"
      :bodyStyle="{ height: '500px', overflowY: 'auto' }">
      <ecu-version-list-by-vehicle-version :traceId="traceId" :EcuDetailInfo="EcuDetailInfo" ref="ecuVersionList"></ecu-version-list-by-vehicle-version>
    </custom-modal>
  </div>
</template>
<script>
import { STable } from '@/components'
import moment from 'moment'
import AuthButton from '@/components/AuthButton'
import { carModelHistoricalVersionListColumns } from '@/views/vehicle/config/list'
import CustomModal from '@/components/CustomModal/index.vue'
import UpgradeLogsPopUps from '@/views/vehicle/components/UpgradeLogsPopUps.vue'
import EcuVersionListByVehicleVersion from '@/views/vehicle/components/EcuVersionListByVehicleVersion.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'

export default {
  components: {
    STable,
    AuthButton,
    CustomModal,
    UpgradeLogsPopUps,
    EcuVersionListByVehicleVersion,
    TableEllipsis
  },
  computed: {
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  created () {
  },
  props: {
    activeKey: {
      type: String,
      default: ''
    },
    vin: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      moment,
      columns: carModelHistoricalVersionListColumns,
      tableData: [],
      ecuVersionVisible: false,
      id: '',
      EcuDetailInfo: {},
      traceId: ''
    }
  },
  watch: {
    activeKey: {
      handler (val) {
        if (val === 'HistoricalVersion') {
          this.refreshData()
          this.resize()
        }
      }
    }
  },
  methods: {
    resize () {
      this.$refs.table.getDomHeight()
    },
    // 关闭车辆版本具体ecu版本列表
    handleCancelEcuVersion () {
      this.ecuVersionVisible = false
    },
    showEcuDetail (record) {
      this.ecuVersionVisible = true
      this.traceId = record.traceId
      this.EcuDetailInfo.vin = record.vin
      this.EcuDetailInfo.modelName = record.modelName
      this.EcuDetailInfo.modelCode = record.modelCode
      this.EcuDetailInfo.createTime = record.createTime
      this.EcuDetailInfo.vehicleVersion = record.vehicleVersion
    },
    // 刷新
    refreshData (isToFirstPage = false) {
      const vm = this
      vm.$nextTick(() => {
        this.$refs.table.refresh(isToFirstPage)
      })
    },
    loadData (parameter) {
      const vm = this
      this.tableData = []
      const apiPromise = vm.$api.getVehicleVersionHistory({ ...parameter, vin: this.vin })
      return new Promise((resolve, reject) => {
        return apiPromise.then(res => {
          if (res.data) {
            this.tableData = res.data
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    fullModal() {
      this.$refs.ecuVersionList.resize();
    }
  }
}
</script>
<style scoped lang="less">
</style>
